<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '1200px' }"
    title="111"
    :bordered="false"
    :mask-closable="false"
    :segmented="{
      content: true,
      footer: true
    }"
  >
    <n-spin :show="loading">
      <x-form ref="formRef" v-model:model="form" :rules="rules" :label-width="90" label-placement="left">
        <n-form-item label="岗位名称" path="roleName">
          <n-input v-model:value="form.roleName" placeholder="请输入岗位名称" />
        </n-form-item>
        <n-form-item label="权限设置" path="checkList">
          <!--          <n-data-table :data="c" :columns="columns" :pagination="false" />-->
          <n-checkbox-group v-model:value="form.checkList" style="width: 100%" @update:value="handleChangeChecked">
            <n-table class="table" size="small">
              <thead>
                <tr>
                  <th>一级菜单</th>
                  <th>二级菜单</th>
                  <th>三级菜单</th>
                  <th>功能权限</th>
                  <th>数据权限</th>
                </tr>
              </thead>
              <tbody v-if="tableList.length > 0" class="text-sm">
                <!--              <tr v-for="(item, index) in tableList" :key="index">-->
                <!--                <td :rowspan="item.firstChildren.length">-->
                <!--                  {{ item.firstName }}-->
                <!--                </td>-->
                <!--                <td>-->
                <!--                  {{ item.secondName }}-->
                <!--                </td>-->
                <!--                <td> 3级菜单 </td>-->
                <!--                <td> 222 </td>-->
                <!--                <td> 数据权限 </td>-->
                <!--              </tr>-->
                <template v-for="(firstItem, firstIndex) in tableList" :key="firstIndex">
                  <template v-for="(secondItem, secondIndex) in firstItem.children" :key="secondIndex">
                    <template v-for="(thirdItem, thirdIndex) in secondItem.children" :key="thirdIndex">
                      <tr>
                        <td v-if="secondIndex === 0 && thirdIndex === 0" :rowspan="calculateFirstRowSpan(firstItem)">
                          <n-checkbox :value="firstItem.id" :label="firstItem.resourceDescription"></n-checkbox>
                        </td>
                        <td v-if="thirdIndex === 0" :rowspan="secondItem.children.length">
                          <n-checkbox :value="secondItem.id" :label="secondItem.resourceDescription"></n-checkbox>
                        </td>
                        <td>
                          <n-checkbox :value="thirdItem.id" :label="thirdItem.resourceDescription"></n-checkbox>
                        </td>
                        <td> 111 </td>
                        <td> 222 </td>
                      </tr>
                    </template>
                  </template>
                </template>
              </tbody>
            </n-table>
          </n-checkbox-group>
        </n-form-item>
      </x-form>
    </n-spin>
    <template #footer>
      <x-button :loading="loading" type="primary" @click="submitForm">保存</x-button>
      <x-button @click="handleCancel">取消</x-button>
    </template>
  </n-modal>
</template>
<script setup lang="ts">
  import { XButton, XForm } from '@/components'
  import { NFormItem, NInput, NModal, NSpin, NDataTable, NSpace, NCheckboxGroup, NCheckbox, NTable } from 'naive-ui'
  import { computed, reactive, ref, h } from 'vue'

  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const form = ref({
    checkList: []
  })
  const loading = ref(false)
  const rules = reactive({
    roleName: {
      required: true,
      message: '请输入岗位名称',
      trigger: 'blur'
    },
    checkList: {
      required: true,
      validator(rule: any, value: []) {
        if (value && value.length) {
          return true
        } else {
          return new Error('请选择关联权限')
        }
      },
      trigger: 'change'
    }
  })
  const tableList = [
    // {
    //   name: '一级',
    //   checked: false,
    //   children: [
    //     {
    //       name: '二级1',
    //       checked: false,
    //       children: [
    //         {
    //           name: '三级1',
    //           checked: false,
    //           children: [
    //             {
    //               name: '操作1',
    //               checked: false
    //             },
    //             {
    //               name: '操作2',
    //               checked: false
    //             },
    //             {
    //               name: '操作3',
    //               checked: false
    //             }
    //           ]
    //         },
    //         {
    //           name: '三级2',
    //           checked: false,
    //           children: [
    //             {
    //               name: '操作2-1',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-2',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-3',
    //               checked: false
    //             }
    //           ]
    //         }
    //       ]
    //     },
    //     {
    //       name: '二级2',
    //       checked: false,
    //       children: [
    //         {
    //           name: '三级2-1',
    //           checked: false,
    //           children: [
    //             {
    //               name: '操作1',
    //               checked: false
    //             },
    //             {
    //               name: '操作2',
    //               checked: false
    //             },
    //             {
    //               name: '操作3',
    //               checked: false
    //             }
    //           ]
    //         },
    //         {
    //           name: '三级2-2',
    //           checked: false,
    //           children: [
    //             {
    //               name: '操作2-1',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-2',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-3',
    //               checked: false
    //             }
    //           ]
    //         },
    //         {
    //           name: '三级2-3',
    //           checked: false,
    //           children: [
    //             {
    //               name: '操作2-1',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-2',
    //               checked: false
    //             },
    //             {
    //               name: '操作2-3',
    //               checked: false
    //             }
    //           ]
    //         }
    //       ]
    //     }
    //   ]
    // }
    {
      id: 1,
      resourceName: 'settings',
      resourceDescription: '设置',
      resourceType: 1,
      parentId: 0,
      deletedFlag: 0,
      resourceRemark: '',
      dataStatus: 1,
      createdAt: '2021-08-04 03:58:32',
      platformType: 1,
      selected: false,
      children: [
        {
          id: 2,
          resourceName: 'resource-list',
          resourceDescription: '资源项管理',
          resourceType: 2,
          parentId: 1,
          deletedFlag: 0,
          resourceRemark: '',
          createdAt: '2021-08-04 03:59:50',
          platformType: 1,
          selected: false,
          children: [
            {
              id: 3,
              resourceName: 'resource-list',
              resourceDescription: '资源项管理11',
              resourceType: 2,
              parentId: 1,
              deletedFlag: 0,
              resourceRemark: '',
              createdAt: '2021-08-04 03:59:50',
              platformType: 1,
              selected: false,
              children: []
            }
          ]
        }
      ]
    }
  ]

  console.log(tableList)
  const calculateFirstRowSpan = (firstItem) => {
    return firstItem.children.reduce((acc, secondItem) => acc + secondItem.children.length, 0)
  }
  const columns = computed(() => {
    return [
      {
        title: '一级菜单',
        key: 'firstName',
        rowSpan: (row: any) => row.firstRowSpan,
        render(row: any, index: any) {
          return h(NSpace, {}, () => [
            h(
              NCheckbox,
              {
                modelValue: row.checked,
                'onUpdate:checked': (value: any) => {
                  console.log(value, index, 1111)
                }
              },
              () => row.firstName
            )
          ])
        }
      },
      {
        title: '二级菜单',
        key: 'secondName',
        rowSpan: (row: any) => row.secondRowSpan,
        render(row: any, index: any) {
          return h(NSpace, {}, () => [
            h(
              NCheckbox,
              {
                modelValue: row.checked,
                'onUpdate:checked': (value: any) => {
                  console.log(value, index, 1111)
                }
              },
              () => row.secondName
            )
          ])
        }
      },
      {
        title: '三级菜单',
        key: 'thirdName',
        render(row: any, index: any) {
          return h(NSpace, {}, () => [
            h(
              NCheckbox,
              {
                modelValue: row.checked,
                'onUpdate:checked': (value: any) => {
                  console.log(value, index, 1111)
                }
              },
              () => row.thirdName
            )
          ])
        }
      },
      {
        title: '功能权限',
        key: 'd',
        render(row: any, index: any) {
          return h(NSpace, {}, () => [
            h(
              NCheckbox,
              {
                modelValue: row.checked,
                'onUpdate:checked': (value: any) => {
                  console.log(value, index, 1111)
                }
              },
              () => row.d
            )
          ])
        }
      },
      {
        title: '数据权限',
        key: 'd',
        render(row: any, index: any) {
          return h(NSpace, {}, () => [
            h(
              NCheckbox,
              {
                modelValue: row.checked,
                'onUpdate:checked': (value: any) => {
                  console.log(value, index, 1111)
                }
              },
              () => row.d
            )
          ])
        }
      }
    ]
  })

  const handleChangeChecked = (val: any) => {
    console.log(val, 1111)
  }
  const submitForm = () => {}
  const handleCancel = () => {}
</script>
<style scoped lang="scss"></style>
